<template>
  <div>
    <template>
      <!-- 通过row-class-name传递对应的类名给组件内的行,应为函数进行判断 -->
      <!-- 固定表头添加height则默认为固定 -->
      <!-- 列固定则需要在table标签设置fixed,然后在需要对应的列添加fixed="left/right" -->
      <!-- maxheight="100设置表格最大高度,超出则显示滚动条 -->
      <el-table
        :data="tableData"
        style="width: 500px"
        height="250"
        border
        :row-class-name="tableRowClassName"
      >
        <!-- 通过prop传值,绑定到对应的列,取值从tableData中的数据匹配对应属性名 -->
        <el-table-column prop="date" label="日期" width="180">
        </el-table-column>
        <el-table-column prop="name" label="姓名" width="180">
        </el-table-column>
        <el-table-column prop="address" label="地址"> </el-table-column>
      </el-table>
    </template>
  </div>
</template>
<script>
export default {
  data() {
    return {
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },
      ],
    };
  },
  created() {},
  computed: {},
  methods: {
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex === 1) {
        return "warning-row";
      } else if (rowIndex === 2) {
        return "success-row";
      }
      return "";
    },
  },
};
</script>
<style lang='less'  scoped>
//样式为子组件样式,需要加穿透
/deep/.el-table {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  .success-row {
    background: #f0f9eb;
  }
  .warning-row {
    background: oldlace;
  }
}
</style>
